<template>
    <div class="addProd">
        <div class="box flex-b">
            <div class="left">
                <div class="prod-title">
                    <div class="flex-a">
                        <div class="basic">{{ type == 'recharge' ? '自由续充' : '会员卡开卡' }}</div>
                        <div><el-button type="warning" style="padding:12px 30px" class="btn-plain"
                                @click="back">返回上一页</el-button></div>
                    </div>
                </div>
                <div class="prod-content" style="padding-left: 10px;">
                    <el-form ref="form" :model="form" class="input">
                        <div>
                            <p>选择开通项目</p>
                            <el-select v-model="form.id" placeholder="请选择" @change="changeCard"
                                :disabled="type == 'recharge' ? true : false">
                                <el-option v-for="item in cardList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div>
                            <div class="vip-card" v-if="cardInfo.money">
                                <div class="vip-no">{{ cardInfo.name }}</div>
                                <div class="vip-price flex-a flex-b">
                                    <div>￥<span>{{ cardInfo.money }}</span></div>
                                    <!-- <div class="vip-pay">充值</div> -->
                                </div>
                            </div>
                        </div>
                    </el-form>
                </div>
                <div class="prod-title">
                    <div class="flex-a">
                        <div class="basic">权益</div>
                    </div>
                    <div class="prod-list">
                        <div class="item">
                            <div><img src="@/assets/images/sp.png" alt=""></div>
                            <div>商品享会员价</div>
                        </div>
                        <div class="item">
                            <div><img src="@/assets/images/fw.png" alt=""></div>
                            <div>服务享会员价</div>
                        </div>
                        <div class="item">
                            <div><img src="@/assets/images/jy.png" alt=""></div>
                            <div>寄养享会员价</div>
                        </div>
                        <div class="item">
                            <div><img src="@/assets/images/ht.png" alt=""></div>
                            <div>活体享折扣0%</div>
                        </div>
                    </div>
                </div>
                <div class="prod-content" style="padding-left: 10px;">
                    <el-form ref="form" :model="form" class="input">
                        <div v-if="type != 'recharge'">
                            <p>最小充值金额</p>
                            <el-input v-model="form.money" class="input input-radius-right" placeholder=""
                                clearable>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                        <div v-if="type == 'recharge'">
                            <p>充值金额</p>
                            <el-input v-model="form.money" class="input input-radius-right" placeholder="" clearable>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                        <div>
                            <p>赠送金额</p>
                            <el-input v-model="form.devMoney" class="input input-radius-right" placeholder="" clearable>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                    </el-form>
                </div>
                <div class="prod-title">
                    <div class="flex-a">
                        <div class="basic">支付方式</div>
                        <!-- <div><el-button type="warning" style="padding:8px 20px" class="btn" @click="add">添加</el-button>
                        </div> -->
                    </div>
                </div>
                <div class="prod-content input" style="padding-left: 10px;">
                    <div class="pay-list">
                        <div class="pay-item flex-a" v-for="(item, index) in payList" :key="item.id">
                            <el-select v-model="form.channel" placeholder="请选择">
                                <el-option v-for="item in typeList" :key="item.type" :label="item.name" :value="item.type">
                                </el-option>
                            </el-select>
                            <div style="margin: 0 10px;"><el-input v-model="form.retMoney" class="input-radius-right"
                                    placeholder="请输入支付金额" clearable>
                                    <template slot="append">元</template>
                                </el-input></div>
                            <div><span class="del" @click="del(index)" v-if="index > 0"><i
                                        class="el-icon-delete"></i>删除</span></div>
                        </div>
                    </div>
                    <div>
                        <p>收银员</p>
                        <el-select v-model="form.cashier" placeholder="请选择">
                            <el-option v-for="item in  userList" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        <p>{{ type == 'recharge' ? '续充备注' : '开卡备注' }}</p>
                        <el-input v-model="form.storeSummary" type="textarea"
                            :placeholder="type == 'recharge' ? '请输入续卡备注' : '请输入开卡备注'" clearable></el-input>
                    </div>
                </div>
                <div style="margin-top: 30px;">
                    <el-button type="warning" style="padding:12px 70px" class="btn" @click="pay">付款</el-button>
                    <el-button type="warning" style="padding:12px 50px" class="btn-plain" @click="back">返回上一页</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { addVip, listCard, addPay } from "@/api/pet/card";
export default {
    name: "addProd",
    components: {

    },
    data() {
        return {
            id: null,
            no: null,
            cardInfo: {},
            userList: [
                {
                    name: '宠小家',
                    value: '1'
                },
                {
                    name: '测试',
                    value: '2'
                }
            ],
            payList: [{}],
            typeList: [
                {
                    name: '支付宝',
                    type: 'zfb'
                },
                {
                    name: '微信',
                    type: 'wx'
                },
                {
                    name: '现金',
                    type: 'xj'
                },
                {
                    name: 'pos机',
                    type: 'pos'
                },
                {
                    name: '其他',
                    type: 'qt'
                }
            ],
            form: {
                devMoney: 0
            },
            cardList: [],
            card: '',
            type: '',
            cardId: ''
        };
    },
    created() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
        }
        if (this.$route.query.no) {
            this.no = this.$route.query.no
        }
        if (this.$route.query.type) {
            this.type = this.$route.query.type
        }
        if (this.$route.query.cardId) {
            this.cardId = this.$route.query.cardId
            this.form.id = Number(this.$route.query.cardId)
        }
        this.getList();
    },
    mounted() {

    },
    methods: {
        /** 查询会员卡信息列表 */
        getList() {
            listCard(this.queryParams).then(response => {
                this.cardList = response.rows;
            });
        },
        changeCard(e) {
            let list = this.cardList.filter(item => {
                return item.id == this.form.id
            })
            this.cardInfo = list[0]
            this.form.money = list[0].money
        },
        add() {
            this.payList.push({})
        },
        del(index) {
            this.payList.splice(index, 1)
        },
        //付款
        pay() {
            var params = Object.assign({}, this.form, { vipId: this.id, vipNo: this.no })
            if (this.type == 'recharge') {
                addPay(params).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '续充成功',
                            type: 'success'
                        });
                        this.back()
                    }
                })
            } else {
                addVip(params).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '开卡成功',
                            type: 'success'
                        });
                        this.back()
                    }
                })
            }
        },
        // 返回上一页
        back() {
            this.$router.back()
            // this.$router.push({ path: '/business/cashier' })
        },
    }
};
</script>
<style scoped lang="scss">
.box {
    position: relative;

    .left {
        width: 100%;
    }

    .prod-title {
        .basic {
            font-size: 18px;
            color: #333336;
            font-weight: 700;
            margin-right: 30px;

            span {
                color: #409eff;
                font-size: 12px;
                font-weight: normal;
                margin: 0 20px 0 5px;
            }
        }

        .prod-list {
            margin-top: 20px;

            .item {
                display: inline-block;
                width: 120px;
                text-align: center;

                img {
                    width: 40px;
                }
            }
        }
    }

    .prod-content {
        margin-top: 20px;

        .pay-list {
            .pay-item {
                .del {
                    cursor: pointer;
                }
            }
        }

        .vip-card {
            width: 300px;
            height: 150px;
            background: url("../../../assets/images/pt.png");
            background-size: 100% 100%;
            color: #333;
            border-radius: 13px;
            border: 2px solid #d5d5d5;
            box-sizing: border-box;

            .vip-no {
                margin: 70px 0 0 45px;
                line-height: 20px;
                height: 20px;
                font-weight: bold;
            }

            .vip-price {
                margin: 0 15px 0 200px;

                span {
                    font-size: 30px;
                    font-weight: bold;
                }
            }

            .vip-pay {
                width: 60px;
                height: 22px;
                background: #d9d9d9;
                border-radius: 15px;
                color: #595959;
                text-align: center;
                cursor: pointer;
            }
        }

        div {
            margin-bottom: 15px;

            .mr {
                margin-right: 10px;
            }

            p {
                color: #000000;
                font-size: 14px;

                span {
                    color: #b3b3b3;
                    font-size: 12px;
                }
            }

            .el-input {
                width: 240px;
            }

            .select {
                margin-left: 10px;
                width: 80px;
            }

            .el-textarea {
                width: 500px;
            }

            .el-button.btn {
                margin-left: 10px;
            }

            .tip {
                display: inline-block;
                font-size: 12px;
                color: #333336;
                margin-left: 5px;

                span {
                    color: #409eff;
                }

                span:hover {
                    cursor: pointer;
                }
            }

        }

        .flex {
            p {
                margin-top: 0 !important;
            }
        }

        .suggest {
            span {
                color: rgb(245, 108, 108);
                font-size: 12px;
            }
        }

        .table {
            margin-left: 130px;

            .el-input {
                width: 120px !important;
            }

            .el-textarea {
                width: 150px !important;
            }

            div {
                color: #409eff;
            }

            .switch {
                div {
                    margin: 0;
                }

                span {
                    display: inline-block;
                    font-size: 14px;
                    color: #606266;
                    width: 110px;
                    text-align: left;
                    box-sizing: border-box;
                }
            }
        }
    }
}

.submit-foot {
    position: fixed;
    bottom: 20px;
    background-color: #fff;
    width: 100%;
    height: 60px;
    z-index: 77;
    padding-left: 20px;
    margin-left: -18px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 6px 0 6px rgba(0, 0, 0, .12);
    line-height: 60px;
    margin-bottom: -20px;

}
</style>
